<template>
    <div class="chusheDetail">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>项目审批</el-breadcrumb-item>
            <el-breadcrumb-item>试点项目申报预审</el-breadcrumb-item>
            <el-breadcrumb-item>查看</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="head">
            <h3 class="title">{{info.projectName}}</h3>
            <ul class="tag">
                <li>
                    <span>规划编号：</span>
                    <i>{{info.projectNo}}</i>
                </li>
                <li>
                    <span>提交人：</span>
                    <i>{{creator.creatorName}}</i>
                </li>
                <li>
                    <span>提交时间：</span>
                    <i>{{creator.createTime}}</i>
                </li>
            </ul>
        </div>
        <div class="basicInfo">
            <h3 class="title">
                <i></i>
                基本信息
            </h3>
            <el-row>
                <el-col :span="12">
                    <label>项目编码</label>
                    <span>{{info.uniqueCityCode}}</span>
                </el-col>
                <el-col :span="12">
                    <label>项目类型</label>
                    <span>{{getProjectName(info.projectCategoryName)}}</span>
                </el-col>
                <el-col :span="12">
                    <label>项目概算</label>
                    <span>{{info.projectBudget}}</span>
                </el-col>
                <el-col :span="12">
                    <label>资金来源</label>
                    <span>{{info.capitalSource}}</span>
                </el-col>
                <el-col :span="12">
                    <label>计划开始时间</label>
                    <span>{{info.planBeginTime}}</span>
                </el-col>
                <el-col :span="12">
                    <label>计划结束时间</label>
                    <span>{{info.planEndTime}}</span>
                </el-col>
                <el-col :span="12">
                    <label>项目联系人</label>
                    <span>{{info.projectContact}}</span>
                </el-col>
                <el-col :span="12">
                    <label>项目联系人电话</label>
                    <span>{{info.projectContactMobile}}</span>
                </el-col>
                <el-col :span="24">
                    <label class="other">附件</label>
                    <!-- <span>软件工程</span> -->
                </el-col>
                <el-col :span="24">
                    <label class="other">建设内容</label>
                    <span>{{info.remark}}</span>
                </el-col>
            </el-row>
        </div>
        <Tab />
    </div>
</template>

<script>
/* eslint-disable */
import Tab from '../.../../../../../components/Tab'
export default {
    data() {
        return {
            info: {},
            creator: {},
            workflow: null,
            activities: [
                {
                    content: "试点项目预审",
                    timestamp: "2018-04-12 20:46",
                    size: "large",
                    type: "primary",
                    icon: "el-icon-more",
                    name: '李四'
                }
            ]
        };
    },
    components: {
        Tab
    },
    computed: {
        id() {
            return this.$route.query.id;
        },
        pid() {
            return this.$route.query.pid;
        }
    },
    mounted() {
        this.getDetail();
        this.getCreator();
    },
    methods: {
        getDetail() {
            this.axios
                .get("/projectTrial/getOne", { params: { id: this.id } })
                .then(res => {
                    this.info = res.data;
                });
        },
        getProjectName(_state) {
            let state = Number(_state);
            let stateStr = "";
            if (state === 1) {
                stateStr = "全市发展规划";
            } else if (state === 2) {
                stateStr = "专项发展规划";
            } else if (state === 3) {
                stateStr = "软件开发";
            } else if (state === 4) {
                stateStr = "系统集成";
            } else if (state === 5) {
                stateStr = "民政局";
            } else if (state === 6) {
                stateStr = "公安局";
            } else if (state === 7) {
                stateStr = "财政局";
            } else if (state === 8) {
                stateStr = "国税局";
            } else if (state === 9) {
                stateStr = "土地局";
            }
            return stateStr;
        },
        getCreator() {
            this.axios
                .get("/projectTrial/getOne/log", {
                    params: {
                        trialId: this.id,
                        actionType: 1
                    }
                })
                .then(res => {
                    if (res.code !== 1000) {
                        this.$message.error(res.message);
                    }
                    this.creator = res.data;
                });
        }
    }
};
</script>

<style lang="less" scoped>
.chusheDetail {
    .head {
        margin: 20px 0;
        padding: 20px;
        background-color: #fff;
        .title {
            font-size: 24px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }
        .tag {
            display: flex;
            color: #999;
            margin-top: 10px;
            i {
                font-style: initial;
                color: #333;
            }
            li {
                margin-right: 40px;
            }
        }
    }

    .basicInfo {
        padding: 20px;
        background-color: #fff;
        .title {
            font-size: 18px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            i {
                width: 4px;
                height: 16px;
                display: inline-block;
                background-color: #4967cf;
                margin-right: 6px;
            }
        }
        .el-row {
            border: 1px solid rgba(238, 238, 238, 1);
            border-bottom: none;
            .el-col {
                border-bottom: 1px solid rgba(238, 238, 238, 1);
            }
        }

        label {
            height: 40px;
            line-height: 40px;
            display: inline-block;
            width: 150px;
            background-color: #fafafa;
            text-align: right;
            padding-right: 14px;
            color: #999999;
        }
        .other {
            height: 80px;
        }
        span {
            height: 40px;
            padding-left: 15px;
            color: #333;
        }
    }

    .tabs {
        margin-top: 20px;
        padding: 20px;
        background-color: #fff;
    }
}
</style>
